<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="image/x-icon" rel="shortcut icon" href="css/favicon.ico">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Serial consoles</title>
    <!-- Bootstrap -->
    <link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="libs/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
    <script src="libs/jquery/dist/jquery.min.js"></script>
    <script src="libs/jquery-ui-dist/jquery-ui.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="libs/tether/dist/js/tether.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/socket.io-client/dist/socket.io.js"></script>
    <script src="git/three/build/three.js"></script>
    <script src="git/three/examples/js/renderers/Projector.js"></script>
    <script src="git/three/examples/js/renderers/CanvasRenderer.js"></script>
    <script src="git/three/examples/js/controls/OrbitControls.js"></script>
    <script src="git/three/examples/js/exporters/STLBinaryExporter.js"></script>
    <script src="ui.js"></script>

    <link href="css/toggle.css" rel="stylesheet">
<style>
.ct-console-form{
    height: 100vh;
    margin-bottom: -50px;
    padding-bottom: 60px;
    margin-top: -50px;
    padding-top: 60px;
}
.ct-console-form textarea{
  height:100%;
}
.ct-command {
  position:absolute;
  width:300px;
  height:250px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translatey(-50%);
}
.ct-command.maximized {
  width:90%;
  height:80%;
  margin:auto;
}
</style>
<script src="/version/Consoles"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="consoles.js"></script>
  </head>
<body lang="en">
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Ports</a>
  </li>
  <template class='_port-tab'>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#ttyUSB2" role="tab" aria-expanded="false"><span></span>
      <button type="button" class="close ml-2" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </a>
  </li>
  </template>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">
<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Speed</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <template class='port'>
    <tr>
      <td>
      <td>
      <td><div class="dropdown">
        <select class="custom-select"></select>
      </td>
      <td><button type="button" class="btn btn-primary mr-1">Open</button><button type="button" class="btn btn-danger">Close</button>
    </tr>
  </template>
  </tbody>
</table>
  </div>
  <template class='port-body'>
  <div class="tab-pane" id="profile" role="tabpanel">
    <div class="form-group ct-console-form">
      <div class="ct-command"></div>
      <textarea class="form-control"></textarea>
    </div>
    <div class="form-group px-4">
      <div class="input-group">
        <span class="input-group-addon">
          Scroll
        </span>
        <span class="input-group-addon">
          <input type="checkbox" titlearia-label="Checkbox for following text input" checked>
        </span>
        <select class="custom-select input-group-addon" title="choose type of EOL of string">
          <option value="">no EOL</option>
          <option value="r">CR</option>
          <option value="n">LF</option>
          <option value="rn" selected>CR LF</option>
        </select>
        <input type="text" class="form-control" placeholder="Send it..." title="press Delete in dropup to remove history">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Command!</button>
        </span>
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Send!</button>
        </span>
      </div>
    </div>
  </div>
  </template>
</div>
